<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>机 房 巡 检 记 录 系 统</title>
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
</head>
<body>
    <div id="app">
        <div class="loginMain">
            <h2>系 统 登 录</h2>
            <div class="loginInfo">
                <form action="/toLogin" method="post" id="loginFrom">
                    <el-input class="myInput" v-model="username" placeholder="请输入账号" clearable></el-input>
                    <el-input class="myInput" v-model="password" placeholder="请输入密码" show-password clearable></el-input>
                    <el-button class="myInput" type="success" @click="goLogin">登录</el-button>
                </form>
            </div>
            <div class="bottomTitle">机 房 巡 检 记 录 系 统   </div>

        </div>
    </div>
</body>
<!--公共的js样式-->
<script th:src="@{/js/vue.js}" type="text/javascript"></script>
<script th:src="@{/js/axioc.js}" type="text/javascript"></script>
<script th:src="@{/js/elementUi.js}" type="text/javascript"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function() {
            return {
                username:'admin',
                password:'admin',
            }
        },
        methods:{
            //登录事件！！！
            goLogin(){
                //获取到账号和密码,判断是否为空
                if(this.username=="" || this.username==undefined || this.password=="" || this.password==undefined){
                    this.$message({
                        message: '账 号 密 码 不 能 为 空',
                        type: 'warning'
                    });
                    return;
                }
                //验证账号密码，跳转到后端
                axios.post("/yyds/login",{"username": this.username,"password":this.password}).then(resp=>{
                   if(resp.data.code=='1'){
                       window.location.href = "/yyds/index";
                   }else{
                       this.$message.error('账 号 密 码 错 误');
                   }
                });
            }
        }
    });
</script>
</html>
